import "./style.less";
import home1 from "@/assets/images/tabbar/home_1.png";
import home2 from "@/assets/images/tabbar/home_2.png";
import fast from "@/assets/images/tabbar/fast.png";
import my_1 from "@/assets/images/tabbar/my_1.png";
import my_2 from "@/assets/images/tabbar/my_2.png";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function TabBar() {
  const [index, setShow] = useState(1);
  const navigator = useNavigate();
  console.log();

  const switchFn = (num: number, url: string) => {
    setShow(num);
    navigator(url);
  };

  return (
    <div>
      <div className="tabBar">
        <div onClick={() => switchFn(1, "/home")}>
          <img src={index === 1 ? home1 : home2} alt="" />
        </div>
        <div onClick={() => switchFn(0, "/fast")}>
          <img src={fast} alt="" />
        </div>
        <div onClick={() => switchFn(2, "/mine")}>
          <img src={index === 2 ? my_1 : my_2} alt="" />
        </div>
      </div>
    </div>
  );
}
